<template>
  <a-modal
    :open="open"
    :title="currentAnnouncement?.title || '公告详情'"
    width="800px"
    :footer="null"
    @cancel="handleCancel"
  >
    <div v-if="currentAnnouncement" class="announcement-detail">
      <!-- 公告头部信息 -->
      <div class="announcement-header">
        <div class="announcement-tags">
          <a-tag v-if="currentAnnouncement.isTop === 1" color="red" class="top-tag">
            置顶
          </a-tag>
          <a-tag 
            :color="getTypeColor(currentAnnouncement.type)" 
            class="type-tag"
          >
            {{ getTypeText(currentAnnouncement.type) }}
          </a-tag>
          <a-tag 
            :color="currentAnnouncement.status === 1 ? 'green' : 'default'"
            class="status-tag"
          >
            {{ currentAnnouncement.status === 1 ? '已发布' : '已下线' }}
          </a-tag>
        </div>
        
        <div class="announcement-meta">
          <div class="meta-item">
            <span class="meta-label">发布者：</span>
            <span class="meta-value">{{ currentAnnouncement.user?.userName || '未知' }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">发布时间：</span>
            <span class="meta-value">{{ formatTime(currentAnnouncement.publishTime) }}</span>
          </div>
          <div v-if="currentAnnouncement.expireTime" class="meta-item">
            <span class="meta-label">过期时间：</span>
            <span class="meta-value expire-time">{{ formatTime(currentAnnouncement.expireTime) }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">更新时间：</span>
            <span class="meta-value">{{ formatTime(currentAnnouncement.updateTime) }}</span>
          </div>
        </div>
      </div>
      
      <!-- 公告内容 -->
      <div class="announcement-content">
        <h3 class="content-title">公告内容</h3>
        <div class="content-body" v-html="formatContent(currentAnnouncement.content)"></div>
      </div>
    </div>
    
    <div v-else class="loading-state">
      <a-spin size="large" />
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { getAnnouncementVOById, markAsRead, type AnnouncementVO } from '@/api/announcementController'
import dayjs from 'dayjs'

interface Props {
  open: boolean
  announcement?: AnnouncementVO | null
}

interface Emits {
  (e: 'update:open', open: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 直接使用传入的announcement，不需要额外的ref
const currentAnnouncement = computed(() => props.announcement)

const handleCancel = () => {
  emit('update:open', false)
}

const getTypeColor = (type: number) => {
  const colors = {
    0: 'blue',    // 普通公告
    1: 'red',     // 紧急公告
    2: 'orange'   // 维护公告
  }
  return colors[type as keyof typeof colors] || 'blue'
}

const getTypeText = (type: number) => {
  const texts = {
    0: '普通公告',
    1: '紧急公告',
    2: '维护公告'
  }
  return texts[type as keyof typeof texts] || '普通公告'
}

const formatTime = (time: string) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

const formatContent = (content: string) => {
  // 简单的换行处理，添加安全检查
  if (!content) return ''
  return content.replace(/\n/g, '<br>')
}
</script>

<style scoped>
.announcement-detail {
  max-height: 70vh;
  overflow-y: auto;
}

.announcement-header {
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.announcement-tags {
  margin-bottom: 16px;
}

.announcement-tags .ant-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.announcement-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-label {
  color: #8c8c8c;
  font-size: 14px;
  margin-right: 8px;
  min-width: 80px;
}

.meta-value {
  color: #262626;
  font-size: 14px;
}

.expire-time {
  color: #faad14;
}

.announcement-content {
  margin-top: 20px;
}

.content-title {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 16px;
  border-left: 4px solid #1890ff;
  padding-left: 12px;
}

.content-body {
  color: #595959;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  background: #fafafa;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
}

.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

@media (max-width: 768px) {
  .announcement-meta {
    grid-template-columns: 1fr;
  }
  
  .meta-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .meta-label {
    margin-bottom: 4px;
  }
}

/* 黑暗模式适配 */
[data-theme="dark"] .announcement-detail {
  color: #ffffff;
}

[data-theme="dark"] .announcement-header {
  border-bottom-color: #404040;
}

[data-theme="dark"] .announcement-title {
  color: #ffffff;
}

[data-theme="dark"] .announcement-content {
  color: #d1d5db;
  background: #262626;
  border-color: #404040;
}

[data-theme="dark"] .announcement-meta {
  background: #262626;
  border-color: #404040;
}

[data-theme="dark"] .meta-label {
  color: #9ca3af;
}

[data-theme="dark"] .meta-value {
  color: #ffffff;
}

[data-theme="dark"] .ant-modal-content {
  background: #1f1f1f !important;
  color: #ffffff;
}

[data-theme="dark"] .ant-modal-header {
  background: #262626 !important;
  border-bottom-color: #404040 !important;
}

[data-theme="dark"] .ant-modal-title {
  color: #ffffff !important;
}

[data-theme="dark"] .ant-modal-body {
  background: #1f1f1f !important;
  color: #ffffff;
}

[data-theme="dark"] .ant-modal-footer {
  background: #262626 !important;
  border-top-color: #404040 !important;
}
</style>
